<template>
  <div class="main">
    <div>
      <router-view></router-view>
    </div>
     <van-tabbar
      v-model="activeIndex"
      active-color="#FF5067" inactive-color="#7C7B80"
      route
    >
      <!-- route 是否开启路由模式 -->
      <!-- 加上route后，可实现路由和底部导航同步跳转 -->
      <!-- :to="{name:item.routeName}"  要跳转到哪个路由 -->
      <!-- :to="{name:目标路由名称}" -->
      <van-tabbar-item
        v-for="(item, index) in tabbarData"
        :key="index"
        :to="{ name: item.routeName }"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.activeIcon : item.inactiveIcon" />
        </template>
      </van-tabbar-item>

      <!-- <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item> -->
    </van-tabbar>
  </div>
</template>

<script>

export default {
  name: 'Main',
  data(){
    return{
      activeIndex: 0,
      tabbarData: [
        {
          title: "电影/影院",
          routeName: "MovieCinema",
          activeIcon: require("../assets/home-active.png"),
          inactiveIcon: require("../assets/movie.png"),
          routes:["wellrece","Cinema","tobeshown","classicFilms"]
        },
          {
          title: "视频",
          routeName: "Shipin",
          activeIcon: require("../assets/shipin-active.png"),
          inactiveIcon: require("../assets/shipin.png"),
          // routes:["movieCinema"]
        },
        {
          title: "小视频",
          routeName: "SmallVideo",
          activeIcon: require("../assets/smallvideo-active.png"),
          inactiveIcon: require("../assets/smallvideo.png"),
          routes:["smallVideo"]
        },
        {
          title: "我的",
          routeName: "My",
          activeIcon: require("../assets/my-active.png"),
          inactiveIcon: require("../assets/my.png"),
          routes:["my"]
        }
      ],
    }
  }

}
</script>

<style lang="less" scoped>
body{
  margin:0 auto;
}
.van-tabbar--fixed{
  border-top: 1px solid #ddd;
  z-index: 999;
}
</style>